<template>
	<view class="circleRefund">
		<!-- 顶部 -->
		<view class="head" :style="{opacity:topOpacity}" v-if="!scrollTop">
			<image class="bg" src="../../images/circle/background.png" mode="scaleToFill"></image>			<!-- 顶部操作 -->
			<view class="top">
				<image @tap="handleFan()" class="back" src="../../images/aliang/left.png" mode="widthFix"></image>
				<text class="title">退款</text>
				<text style='width: 30rpx;'></text>
			</view>
			<view class="text">
				长按并识别下方二维码，添加一起来往官方客服，将为您办理退款
			</view>
		</view>
		<view class="code">
			<image src="../../images/mine/code.png" mode=""></image>
		</view>
		<view class="remark">
			<view class="text1">退款说明：</view>
			<view class="text2"><text>1.</text> 本圈子内容为虚拟内容服务，浏览内容等同消费服务。加入圈子24小时内若没有产生浏览圈子行为可以联系客服退款，超时或浏览圈子后恕不提供退款服务</view>
			<view class="text2"><text>2.</text> 退款后，您将立即退出圈子且不能再查看圈子内容，请慎重考虑</view>
			<view class="text2"><text>3.</text> 退款费用将在3一5个工作日返回到您的钱包余额中</view>
		</view>
	<!-- 	<view class="btn-box">
			<view class="btn">我知道了</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				topOpacity: 1,
				scrollTop: false, //判断滚动
				topOpacity2: 0,
			};
		},
		methods:{
			// 返回
			handleFan() {
				uni.navigateBack({
					delta: 1,
				});
			},
		},
		onPageScroll(e) {
			let _sTop = 155;
			let _top = e.scrollTop;
			this.topOpacity = Math.abs(_sTop - e.scrollTop) / _sTop;
			this.topOpacity2 = Math.abs(1 - this.topOpacity);
			if (_top >= 100) {
				this.scrollTop = true;
				this.topOpacity2 = 1;
			} else if (_top <= 20) {
				this.scrollTop = false;
				this.topOpacity2 = Math.abs(_sTop - e.scrollTop) / 150;
			}
		},
	}
</script>

<style lang="less">
	.circleRefund{
		.head {
			width: 100%;
			position:relative;
			height:362rpx;
			box-sizing:border-box;
			.bg{
				position:absolute;
				top:0;
				left:0;
				right:0;
				width:100%;
				height:100%;
				z-index: -1;
			}
			.top{
				display: flex;
				justify-content: space-between;
				align-items: center;
				height:106rpx;
				padding:0 29rpx 0 30rpx;
				.back{
					width:31rpx;
				}
				.title{
					font-size: 36rpx;
					font-family: PingFangSC, PingFangSC-Medium;
					font-weight: 500;
					text-align: center;
					color: #ffffff;
				}
			}
			.text{
				padding:30rpx 85rpx;
				font-size: 32rpx;
				font-family: PingFangSC, PingFangSC-Regular;
				font-weight: 400;
				text-align: center;
				color: #ffffff;
				line-height: 48rpx;
			}
			
		}
		.code{
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top:-91rpx;
			image{
				width: 308rpx;
				height: 308rpx;
			}
		}
		.remark{
			padding:70rpx 64rpx 73rpx;
			font-family: PingFangSC, PingFangSC-Medium;
			color: #111111;
			.text1{
				font-size: 28rpx;
				font-weight: 500;
				line-height: 48rpx;
			}
			.text2{
				font-size: 24rpx;
				font-weight: 400;
				line-height: 42rpx;
				display: flex;
				margin-bottom:9rpx;
				text{
					margin-right:16rpx;
				}
			}
		}
		.btn-box{
			padding:73rpx 264rpx;
			.btn{
				height: 72rpx;
				line-height: 72rpx;
				text-align: center;
				background: #0f6ede;
				border-radius: 8rpx;
				font-size: 30rpx;
				font-family: PingFangSC, PingFangSC-Regular;
				font-weight: 400;
				color: #ffffff;
			}
			
		}
	}
</style>
